<template>
	<view class="content">
		<z-paging ref="paging" :auto="false" :fixed="false" :height="height" v-model="dataList" @query="queryList">
			<view class="content_ls" v-for="item in dataList" :key="item.id" @tap.stop="toDetail(item.id)">
				<view class="u-flex u-row-between">
					<view class="u-flex u-white-60">
						<view class="content_ls--tit u-line-1">
							{{item.jobname}}
						</view>
						<view class="worry_ico" v-if="item.emergency == 1">急</view>
					</view>
					<view class="content_ls--salary">
						{{item.wage_text}}
					</view>
				</view>
				<view class="u-flex u-row-left u-m-t-10 content_ls_item">
					<text>{{item.education_text}}</text>
					<u-line margin="0 20rpx" :hair-line="false" length="25rpx" direction="col" color="#867F7F"></u-line>
					<text>{{item.company_scale_text}}</text>
					<u-line margin="0 20rpx" :hair-line="false" length="25rpx" direction="col" color="#867F7F"></u-line>
					<text>{{item.district_text}}</text>
				</view>
				<view class="u-flex u-m-t-24 content_ls--tags">
					<view v-for="(tag,index) in item.tag.slice(0,4)" :key="index">
						{{tag}}
					</view>
				</view>
				<view class="u-flex u-row-between">
					<view class="u-flex content_ls--companyname">
						<u-image class="u-m-r-20" :src="item.company_logo" shape="circle" width="50"
							height="50"></u-image>
						<view class="u-white-60 u-line-1">
							{{item.companyname}}
						</view>
					</view>
					<view class="u-flex content_ls--refreshtime">
						{{item.refreshtime}}
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref,
		watch
	} from 'vue'
	const props = defineProps({
		height: String,
		params: Object
	})
	// 获取职位列表数据
	const paging = ref(null)
	let dataList = ref([])
	watch(() => props.height, n => {
		console.log(n)
	}, {
		immediate: true,
		deep: true
	})
	watch(() => [props.params, paging], (nv) => {
		if (JSON.stringify(nv[0]) == '{}') return
		if (nv[1] && nv[1].value) {
			nv[1].value.reload(true)
		}
	}, {
		immediate: true,
		deep: true
	})
	// 去职位详情页
	const toDetail = (id) => {
		uni.$u.route('pages/pagesHome/detailPages/job', {
			id
		})
	}
	// 获取职位列表数据
	const queryList = async (pageNo, pageSize) => {
		let params = Object.assign({
			page: pageNo,
			pagesize: pageSize,
		}, props.params)
		let res = await uni.$u.api.getJobList({
			params
		})
		if (res) {
			paging.value.complete(res.items)
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background-color: #f1f1f1;

		.worry_ico {
			font-size: 20rpx;
			color: #ffffff;
			padding: 6rpx;
			border-radius: 6rpx;
			background-color: #ff8b82;
			margin-left: 20rpx
		}

		&_ls {
			background-color: #fff;
			padding: 22rpx 32rpx;
			margin-bottom: 20rpx;

			/* #ifdef MP-WEIXIN */
			:deep(u-line) {
				flex: none;
			}

			/* #endif */

			&--tit {
				color: #101010;
				font-size: 36rpx;
				font-weight: bold;
			}

			&--salary {
				color: #00D075;
				font-size: 28rpx;
			}

			&_item {
				color: #867F7F;
				font-size: 26rpx;
			}

			&--tags {
				flex-wrap: wrap;

				view {
					background-color: #f2f2f2;
					color: #867F7F;
					font-size: 28rpx;
					margin-right: 20rpx;
					padding: 10rpx;
					border-radius: 8rpx;
					margin-bottom: 24rpx;
				}
			}

			&--companyname {
				color: #101010;
				font-size: 28rpx;
			}

			&--refreshtime {
				color: #867F7F;
				font-size: 24rpx;
			}
		}
	}
</style>